<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			<jubu-componet></jubu-componet>
		</div>
		
		<!-- 4、局部组件的template模板，用于写html代码 -->
		<template id="jubuTemplate">
			<div>
				{{name}}
			</div>
		</template>
		
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			
			//3、定义局部组件的实体对象
			let jubuComponet = {
				//3.1、局部组件的数据
				data: function(){
					return{
						name: 'zhangsan'
					}
				},
				//3.2、局部组件的html代码模板
				template: "#jubuTemplate",
				//3.3、局部组件的方法
				methods:{}
			}
			
			const vue = new Vue({
				el: "#app",
				data: {},
				methods:{},
				mounted() {
					
				},
				//1、定义局部组件
				components:{
					//2、定义局部组件：
						//局部组件id：局部组件实体对
						//两个名字相同的时候，可以只写key
					jubuComponet
				}
			})
		</script>
		
		
	</body>
</html>
